<template>
  <page-wrap
    back
    hide-tab
    :show-top="showTop"
    :bg-color="uNavColor"
    :title="consultantInfo.iname"
    :dark="false"
  >
    <view class="info-wrapper">
      <view
        class="consultant-top"
        :style="'padding-top:' + navHeight + 'px;'"
      ></view>
      <view class="user-info">
        <view class="header">
          <view class="header-left">
            <image class="avatar" :src="consultantInfo.pic"></image>
            <text class="online-status">{{
              consultantInfo.isOnline == 1 ? "在线" : "离线"
            }}</text>
            <image
              class="sex"
              :src="consultantInfo.sex == '1' ? male : female"
            ></image>
          </view>
          <view class="header-right">
            <view class="username-box">
              <text class="username">{{ consultantInfo.iname || "" }}</text>
              <image class="consultant-tag" :src="consultant"></image>
            </view>
            <view class="tags">
              <text
                :class="['tag', `tag${(index % 3) + 1}`]"
                v-for="(item, index) in consultantInfo.consultantTagList"
                :key="item"
                >{{ item }}</text
              >
            </view>
          </view>
        </view>
        <view class="detail">
          <view class="detail-header">
            <text class="info spe" v-if="consultantInfo.personZw">{{
              consultantInfo.personZw || ""
            }}</text>
            <text class="info" v-if="consultantInfo.regionName">{{
              consultantInfo.regionName || ""
            }}</text>
          </view>
          <view class="detail-item">
            <view class="detail-item-box">
              <image class="item-img" :src="goodAt"></image>
              <text class="label">擅长：</text>
            </view>
            <text class="value">{{ consultantInfo.goodAtList || "" }}</text>
          </view>
          <view class="detail-item">
            <image class="item-img" :src="phone"></image>
            <text class="label">联系方式：</text>
            <text class="value">{{ consultantInfo.servicePhone || "" }}</text>
          </view>
          <view class="detail-item">
            <image class="item-img" :src="email"></image>
            <text class="label">邮箱：</text>
            <text class="value">{{ consultantInfo.serviceMail || "" }}</text>
          </view>
        </view>
        <view class="desc">
          <view class="desc-item">
            <view class="value">{{ consultantInfo.star }}</view>
            <view class="title">服务评分</view>
          </view>
          <view class="line"></view>
          <view class="desc-item">
            <view class="value">{{
              consultantInfo.serviceCount
                ? consultantInfo.serviceCount + "+"
                : 0
            }}</view>
            <view class="title">服务人数</view>
          </view>
          <view class="line"></view>
          <view class="desc-item">
            <view class="value">{{ consultantInfo.gznum }}</view>
            <view class="title">从业年限</view>
          </view>
        </view>
        <view class="topic">
          <view class="header-box">
            <text class="line"></text>
            <text class="title">高频咨询话题</text>
          </view>
          <view
            class="topic-item"
            v-for="item in consultantInfo.highTopicList"
            :key="item"
          >
            <view style="display: flex">
              <image class="well" :src="well"></image>
              <text class="text">{{ item }}</text>
            </view>
            <!-- <u-icon name="arrow-right" color="#c0c0c0" size="32"></u-icon> -->
            <!-- <image class="right-arrow" :src="rightArrow"></image> -->
          </view>
        </view>
        <view class="tips">
          <view class="tip1">一览职途 · 认证顾问</view>
          <view class="tip2">致力于成为您的职场“搭子”</view>
          <view class="tip3">本页面内容由顾问编辑，信息来源于该顾问</view>
        </view>
        <view class="operation" v-if="!isConsultant">
          <u-button
            v-if="showGotoChat"
            type="primary"
            shape="circle"
            class="btn"
            @click="toChat"
            >去咨询</u-button
          >
          <u-button
            v-if="!showGotoChat"
            type="primary"
            shape="circle"
            class="btn"
            @click="showMyPopup"
            >预约咨询</u-button
          >
        </view>
      </view>
      <u-popup mode="bottom" v-model="showPopup" v-if="showPopup">
        <view class="content" style="height: 80vh">
          <view class="header">
            <span>预约咨询时间</span>
            <u-icon name="close" @click="closePopup"></u-icon>
          </view>
          <view class="serve-time">
            <span>在线顾问服务时间上午9:00-12:00，下午14:00-18:00</span>
          </view>
          <view class="choose-day">
            <scroll-view :scroll-x="true" class="scrollview-box">
              <block v-for="(item, index) in nextSevenDays" :key="index">
                <view
                  :class="[
                    index == selecetedDay
                      ? 'day-button-selected'
                      : 'day-button',
                  ]"
                  :style="[
                    {
                      background:
                        index == selecetedDay
                          ? '#FFFFFF'
                          : item.available == 10
                          ? '#FFFFFF'
                          : '#EAEAEA',
                    },
                  ]"
                  @click="changeselecetedDay(item, index)"
                >
                  <span>{{
                    index === 0 ? "今天" : nextSevenDays[index].weekDay
                  }}</span>
                  <span>{{ nextSevenDays[index].day }}</span>
                  <span
                    :style="[
                      {
                        color:
                          item.available == 10
                            ? '#00B03F'
                            : item.available == 30
                            ? '#FF670F'
                            : '#888888',
                      },
                    ]"
                  >
                    {{
                      workStatus[index] == 10
                        ? "可预约"
                        : workStatus[index] == 30
                        ? "约满"
                        : "暂无"
                    }}
                  </span>
                </view>
              </block>
            </scroll-view>
          </view>
          <view class="time-list-border">
            <scroll-view
              scroll-y="true"
              class="time-list"
              v-if="showBookTimeList"
            >
              <view
                class="time-card"
                v-for="(item,index) in timeList"
                :key="index"
                @click="bookConsultant(item)"
              >
                <view class="time-card-left">
                  <view class="available-time"
                    >{{ item.showTimeScopeStart }}-{{
                      item.showTimeScopeEnd
                    }}</view
                  >
                  <view
                    class="available-number"
                    :style="[
                      {
                        backgroundColor:
                          item.canAppointmentNumber > 0 ? '#30cc67' : '#D2D2D2',
                      },
                    ]"
                  >
                    <span>可预约 {{ item.canAppointmentNumber }} 人</span>
                  </view>
                </view>
                <u-icon name="arrow-right" style="margin-right: 32rpx"></u-icon>
              </view>
            </scroll-view>
          </view>
          <view v-if="!showBookTimeList" class="no-data">
            <image class="img" :src="consultantNoData"></image>
            <span>很抱歉，今日暂无预约班次</span>
          </view>
        </view>
      </u-popup>
    </view>
  </page-wrap>
</template>

<script>
import { consultantInfo } from "@/api/modules/career";
import {
  getConsultantTimeList,
  getConsultantAppointmentStatus,
} from "@/api/index";
import { ztBurryPoint } from "@/api/modules/career";
export default {
  data() {
    return {
      showGotoChat: false, // 控制是否显示去咨询按钮
      workStatus: [], // 星期几的是否可预约
      consultantNoData: this.$imgBase + "careerPath/consultantNoData.png",
      showBookTimeList: true, // 用来控制约满或者放假状态时下面展示暂无数据的变量
      navHeight: getApp().globalData.navHeight + uni.upx2px(114),
      defaultAvatar: this.$imgBase + "common/avatar_default.png",
      male: this.$imgBase + "career/careerAssessResult/male.png",
      female: this.$imgBase + "career/careerAssessResult/female.png",
      goodAt: this.$imgBase + "career/careerAssessResult/goodAt.png",
      phone: this.$imgBase + "career/careerAssessResult/phone.png",
      email: this.$imgBase + "career/careerAssessResult/email.png",
      well: this.$imgBase + "career/careerAssessResult/well.png",
      rightArrow: this.$imgBase + "career/careerAssessResult/right-arrow.png",
      consultant:
        this.$imgBase + "career/careerAssessResult/consultant-tag.png",
      showTop: false,
      uNavColor: "#101930",
      consultantInfo: {},
      consultantId: "",
      showPopup: false,
      nextSevenDays: [],
      selecetedDay: 0,
      currentDate: "",
      timeList: [
        {
          time: "09:00-09:30",
          availableNum: 1,
        },
        {
          time: "09:00-09:30",
          availableNum: 0,
        },
        {
          time: "09:00-09:30",
          availableNum: 0,
        },
        {
          time: "09:00-09:30",
          availableNum: 1,
        },
        {
          time: "09:00-09:30",
          availableNum: 1,
        },
        {
          time: "09:00-09:30",
          availableNum: 0,
        },
        {
          time: "09:00-09:30",
          availableNum: 1,
        },
        {
          time: "09:00-09:30",
          availableNum: 1,
        },
      ],
    };
  },
  computed: {
    // 是否人企沟通
    isConsultant() {
      return getApp().globalData.loginStatus == "consultant";
    },
  },
  onLoad(opt) {
    this.personId = opt.personId || "";
    this.consultantInfoFn();
    this.getNextWeek();
    this.currentDate = this.nextSevenDays[0].fullDay;
    if (opt.showPopup === "true") {
      this.showPopup = true;
    }
  },
  created() {},
  mounted() {},
  methods: {
    closePopup() {
      this.showPopup = false;
    },
    getNextWeek() {
      const days = 7; // 近7天
      const week = ["日", "一", "二", "三", "四", "五", "六"]; // 星期

      const dateList = Array.from({ length: days }, (v, i) => i).map((day) => {
        const date = new Date();
        date.setDate(date.getDate() + day);
        let tempMonth = Number(date.getMonth()) + 1;
        let tempDay = date.getDate();
        if (tempMonth < 10) {
          tempMonth = "0" + tempMonth;
        }
        if (tempDay < 10) {
          tempDay = "0" + tempDay;
        }
        console.log("tempDay", tempDay);
        return {
          day: tempMonth + "-" + tempDay,
          weekDay: "周" + week[date.getDay()],
          fullDay: date.getFullYear() + "-" + tempMonth + "-" + tempDay,
        };
      });
      this.nextSevenDays = dateList;
      this.getConsultantTimeList(
        this.nextSevenDays[0].fullDay + " " + "00:00:00",
        this.nextSevenDays[6].fullDay + " " + "23:59:59"
      );
      // 10可预约 30约满 40放假
      // this.nextSevenDays.forEach((item) => {
      //   item.available = 10;
      // });
    },
    changeselecetedDay(item, index) {
      this.selecetedDay = index;
      this.getConsultantTimeList(
        item.fullDay + " " + "00:00:00",
        item.fullDay + " " + "23:59:59"
      );
    },
    consultantInfoFn() {
      const params = {
        consultantId: parseInt(this.personId),
      };
      consultantInfo(params).then((res) => {
        if (res.code == 200) {
          const goodAtList = res.data.goodAtList
            ? res.data.goodAtList.join("，")
            : [];
          this.consultantInfo = res.data;
          console.log("this.consultantInfo", this.consultantInfo);
          if (
            uni
              .getStorageSync("consultantId")
              .includes(this.consultantInfo.consultantId)
          ) {
            this.showGotoChat = true;
          } else {
            this.showGotoChat = false;
          }
          this.consultantInfo.goodAtList = goodAtList;
        }
      });
    },
    toChat() {
      // 是否登录im
      var isIMLogin =
        getApp().globalData.tim && getApp().globalData.tim.getLoginUser();
      if (!isIMLogin) {
        uni.showLoading({
          title: "正在连接",
          mask: true,
        });
        setTimeout(() => {
          uni.hideLoading();
        }, 5000);
        let isFirst = true;
        try {
          new IMEventHandler(() => {
            if (isFirst) {
              isFirst = false;
              uni.hideLoading();
              this.reqZtBurryPoint({ rightId: "6", rightName: "顾问咨询" }); // 增加顾问咨询的埋点
              uni.navigateTo({
                // url: `/pagesSub/message/chat/index?chatId=${this.consultantInfo.consultantId}__consultant`,
                url: `/pagesSub/message/newChat/index?chatId=${this.consultantInfo.consultantId}_consultant&isZhituUser=1`,
              });
            }
          });
        } catch (error) {
          console.log("error", error);
        }
      } else {
        this.reqZtBurryPoint({ rightId: "6", rightName: "顾问咨询" }); // 增加顾问咨询的埋点
        uni.navigateTo({
          url: `/pagesSub/message/newChat/index?chatId=${this.consultantInfo.consultantId}_consultant&isZhituUser=1`,
        });
      }
    },
    reqZtBurryPoint(rightItem) {
      const params = {
        rightId: rightItem.rightId,
        cardType: uni.getStorageSync("cardType"),
        personId: uni.getStorageSync("person-id").slice(2) || undefined,

        description: `${
          uni.getStorageSync("person-id").slice(2) || undefined
        }点击了${rightItem.rightName}`,
      };
      ztBurryPoint(params)
        .then((res) => {
          if (res.code == 200) {
            console.log(
              `${uni.getStorageSync("person-id").slice(2) || undefined}点击了${
                rightItem.rightName
              }`
            );
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    showMyPopup() {
      this.showPopup = true;
    },
    async getConsultantTimeList(matchStartTime, matchEndTime) {
      console.log("getConsultantTimeList", matchStartTime, matchEndTime);
      const params = {
        consultantId: parseInt(this.personId),
        matchStartTime: matchStartTime,
        matchEndTime: matchEndTime,
        searchDetail: true,
      };
      const res = await getConsultantTimeList(params);
      if (res.code === 200) {
        // 计算23h59min59s的时间戳是多少ms 去比较这个时间
        console.log("33", new Date(matchEndTime).getTime());
        console.log("44", new Date(matchStartTime).getTime());

        if (
          new Date(matchEndTime).getTime() -
            new Date(matchStartTime).getTime() >
          86399000
        ) {
          res.data.forEach((item, index) => {
            this.nextSevenDays[index].available = item.appointmentStatus;
            this.$set(
              this.nextSevenDays[index],
              "available",
              item.appointmentStatus
            );
            // this.workStatus[index] = item.appointmentStatus;
            this.$set(this.workStatus, index, item.appointmentStatus);
            console.log(" this.workStatus", this.workStatus);

            switch (item.appointmentStatus) {
              case 10:
                return (this.nextSevenDays[index].availableName = "可预约");
                break;
              case 30:
                return (this.nextSevenDays[index].availableName = "约满");
                break;
              case 40:
                return (this.nextSevenDays[index].availableName = "暂无");
                break;
              default:
                break;
            }
          });
        }

        if (res.data) {
          // 10可预约 30约满 40放假 10和30展示列表 40展示暂无可选数据
          if (
            res.data[0].appointmentStatus === 10 ||
            res.data[0].appointmentStatus === 30
          ) {
            this.showBookTimeList = true;
            this.timeList = res.data[0].hourScheduleList;
            let nowDateStamp = new Date().getTime();
            this.timeList.forEach((item) => {
              let startDateStamp = new Date(item.startTime).getTime();
              if (nowDateStamp >= startDateStamp) {
                item.canAppointmentNumber = 0;
              }
              item.showTimeScopeStart =
                item.startTime && item.startTime.slice(11, 16);
              item.showTimeScopeEnd =
                item.endTime && item.endTime.slice(11, 16);
            });
          } else {
            this.timeList = [];
            this.showBookTimeList = false;
          }
        }
      }
    },
    bookConsultant(item) {
      if (item.canAppointmentNumber > 0) {
        this.getConsultantAppointmentStatus(item);
      } else {
        uni.showToast({
          title: "当前时间段无法预约",
          icon: "none",
          duration: 1000
        });
      }
    },
    async getConsultantAppointmentStatus(item) {
      const params = {
        consultantId: parseInt(this.personId),
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
      };
      const res = await getConsultantAppointmentStatus(params);
      if (res.code === 200) {
        uni.navigateTo({
          url:
            "/pagesSub/userCenter/careerPathV2/components/BookInfoConfirm?info=" +
            JSON.stringify(item),
        });
      } else {
        uni.showToast({
          title: res.status_desc,
          icon: "none",
          duration: 1000
        });
      }
    },
  },
};
</script>

<style lang="scss">
$img-base-person: $img-base + "career/careerAssessResult/";
@include img-base-self(".consultant-top", "career/careerAssessResult/back.png");
.consultant-top {
  height: 402rpx;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100%;
  // border-radius: 0 0 68rpx 68rpx;
}
.info-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: 115rpx;
  position: relative;
  .user-info {
    border-radius: 30rpx;
    margin-top: -230rpx;
    padding: 0 24rpx 0 24rpx;
    .header {
      padding: 28rpx;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      background-color: #fff;
      border-radius: 16rpx 16rpx 0 0;
      &-left {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 24rpx;
        .avatar {
          width: 156rpx;
          height: 156rpx;
          border-radius: 50%;
        }
        .online-status {
          flex-shrink: 0;
          margin-top: -34rpx;
          padding: 2rpx 20rpx;
          border-radius: 25rpx;
          background: #26c467;
          border: 3px solid #ffffff;
          text-align: center;
          font-size: 24rpx;
          color: #fff;
        }
        .sex {
          position: absolute;
          width: 28rpx;
          height: 28rpx;
          border-radius: 50%;
          position: absolute;
          right: 0;
          top: 15rpx;
        }
      }
      &-right {
        .username-box {
          display: flex;
          .username {
            font-size: 40rpx;
            font-weight: 600;
            margin-bottom: 12rpx;
          }
          .consultant-tag {
            width: 54rpx;
            height: 46rpx;
          }
        }
        .tags {
          display: flex;
          flex-wrap: wrap;
          .tag {
            padding: 4rpx 12rpx;
            margin: 12rpx;
            border-radius: 4rpx;
          }
          .tag1 {
            background-color: #fdefde;
            color: #fb5806;
            font-size: 24rpx;
          }
          .tag2 {
            background-color: #e2f4df;
            color: #188f3b;
            font-size: 24rpx;
          }
          .tag3 {
            background-color: #ebe9ff;
            color: #4d43aa;
            font-size: 24rpx;
          }
        }
      }
    }
    .detail {
      padding: 2rpx 28rpx 40rpx 28rpx;
      background-color: #fff;
      font-size: 26rpx;
      &-header {
        margin-bottom: 18rpx;
        .info {
          padding-right: 21rpx;
          margin: 0 21rpx 28rpx 0;
        }
        .spe {
          border-right: 1px solid #e6e6e6;
        }
      }
      &-item {
        display: flex;
        padding: 10rpx 0;
        &-box {
          display: flex;
          align-items: center;
          flex-shrink: 0;
        }
        .item-img {
          width: 36rpx;
          height: 36rpx;
          margin-right: 12rpx;
        }
      }
    }
  }
  .content {
    text-align: center;
    background-color: #f4f6f8;
    .header {
      padding: 32rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      span {
        font-size: 40rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 800;
        color: #000000;
      }
    }
    .serve-time {
      width: 100%;
      height: 72rpx;
      background-color: #fff3eb;
      color: #ff670f;
      padding: 14rpx 26rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      justify-content: center;
      font-size: 28rpx;
    }
    .choose-day {
      width: 100%;
      padding: 16rpx 0rpx;
      box-sizing: border-box;
      .scrollview-box {
        width: 100%;
        white-space: nowrap; /* 不换行显示子元素 */
        overflow-x: auto; /* 超出部分自动显示滚动条 */
      }
      .day-button,
      .day-button-selected {
        width: 120rpx;
        /* height: 142rpx; */
        background: #ffffff;
        border-radius: 8rpx;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24rpx 16rpx 20rpx 18rpx;
        box-sizing: border-box;
        margin-left: 16rpx;
        span {
          font-size: 30rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 400;
          margin-bottom: 10rpx;
        }
      }
      .day-button {
        border: none;
        color: #222222;
      }
      .day-button-selected {
        border: 1px solid #ff711e;
        color: #ff711e;
      }
    }
    .time-list-border {
      width: 100%;
      padding: 0rpx 24rpx 16rpx 24rpx;
      box-sizing: border-box;
    }
    .time-list {
      width: 100%;
      height: 50vh;
      border-radius: 12rpx 12rpx 0rpx 0rpx;
      overflow: hidden;

      backface-visibility: hidden;
      transform: translate3d(0, 0, 0);
      -webkit-backface-visibility: hidden;
      -webkit-transform: translate3d(0, 0, 0);
    }
    .time-card {
      height: 120rpx;
      width: 100%;
      background: #ffffff;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2rpx solid #f4f4f4;
      .time-card-left {
        display: flex;
        flex-direction: row;
        align-items: center;
      }
      .available-time {
        height: 48rpx;
        line-height: 48rpx;
        font-size: 32rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #333333;
        margin-left: 44rpx;
      }
      .available-number {
        border-radius: 200rpx;
        width: 200rpx;
        height: 48rpx;
        line-height: 48rpx;
        color: #ffffff;
        margin-left: 16rpx;
      }
    }
  }
  .desc {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 24rpx;
    background: #f9f9f9;
    &-item {
      text-align: center;
      .value {
        padding-bottom: 16rpx;
        font-size: 40rpx;
        font-weight: 600;
      }
      .title {
        font-size: 26rpx;
      }
    }
    .line {
      width: 2rpx;
      height: 84rpx;
      background: #e6e6e6;
    }
  }
  .topic {
    margin-top: 24rpx;
    padding: 28rpx 24rpx;
    background-color: #fff;
    border-radius: 20rpx;
    .header-box {
      display: flex;
      align-items: center;
      margin-bottom: 18rpx;
      .line {
        width: 6rpx;
        height: 28rpx;
        background: #f75a3e;
        margin-right: 20rpx;
        border-radius: 6rpx;
      }
      .title {
        font-size: 36rpx;
      }
    }
    &-item {
      padding: 12rpx 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #555555;
      .well {
        width: 36rpx;
        height: 36rpx;
        margin-right: 14rpx;
      }
      .text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .spe {
        padding-right: 12rpx;
      }
      .right-arrow {
        width: 32rpx;
        height: 32rpx;
        margin-left: auto;
      }
    }
  }
  .tips {
    text-align: center;
    margin-top: 32rpx;
    &-ite {
      display: flex;
      align-items: center;
    }
    .tip1 {
      color: #bfbfbf;
      padding-bottom: 18rpx;
      font-size: 32rpx;
    }
    .tip2 {
      color: #bfbfbf;
      padding-bottom: 30rpx;
      font-size: 26rpx;
    }
    .tip3 {
      color: #bfbfbf;
      font-size: 24rpx;
    }
  }
  .operation {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 32rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    padding-bottom: calc(2rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(2rpx + env(safe-area-inset-bottom));
    .btn {
      width: 100%;
    }
  }
  .no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    .img {
      width: 400rpx;
      height: 400rpx;
    }
  }
}
</style>
